<div style="padding: 16px;">
    <!-- 内容主体区域  面包屑-->
    <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>个人中心</cite></a>
            </span>

    <!-- 水平线 -->
    <hr class="layui-bg-blue">

    <div style="margin-left: 50px">
        <h3>更新头像</h3>
        <div style="width: 200px;">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="ID-upload-demo-img" src="/admin/getAvatar" style="width: 100%; height: 200px;">
                <div id="ID-upload-demo-text"></div>
            </div>
            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>

        <button style="margin-left: 40px;margin-top: 5px" type="button" class="layui-btn" id="ID-upload-demo-btn">
            <i class="layui-icon layui-icon-upload"></i> 选择文件
        </button>
    </div>


    <!-- 水平线 -->
    <hr class="layui-bg-blue">


    <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
    <form style="margin-left: 50px" class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <h3>更改密码</h3>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-inline">
                <input type="password" name="oldPassword" placeholder="请输入" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="password" name="newPassword1" placeholder="请输入" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">再次输入新密码</label>
            <div class="layui-input-inline">
                <input type="password" name="newPassword2" placeholder="请输入" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

</div>

<script>
    // window.onload = function (){
    //     $('#upload-demo-img').attr('src', $('#avatar').attr('src'));
    // }

    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/admin/updateAvatar', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                // 若上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作

                // 向URL添加时间戳
                var timestamp = new Date().getTime();
                $('#avatar').attr('src', '/admin/getAvatar?timestamp=' + timestamp);
                // location.reload();

                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        layui.use(['form'], function () {
            var form = layui.form;
            var layer = layui.layer;
            // 提交事件
            form.on('submit(demo2)', function (data) {
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                // layer.alert(JSON.stringify(field), {
                //     title: '当前填写的字段值'
                // });

                try {
                    $.ajax({
                        url: "/admin/updateInfo",           // 请求路径
                        type: "post",                  // 请求的方式，不区分大小写
                        cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({
                            oldPassword: field.oldPassword,
                            newPassword1: field.newPassword1,
                            newPassword2: field.newPassword2
                        }),
                        datatype: "json",        // 返回类型，text文本、html页面、json数据
                        success: function (response) {
                            if (response.code === 0) {
                                layer.msg("更新成功", {icon: 1});
                            }

                            if (response.code === 1) {
                                layer.msg("原密码输入错误", {icon: 2});
                            }

                            if (response.code === 2) {
                                layer.msg("两次密码输入不一致", {icon: 2});
                            }
                        },
                        error: function (response) {
                            layer.msg("网络异常", {icon: 2});
                        }
                    });
                } catch (e) {
                    console.log(e);
                }




                return false; // 阻止默认 form 跳转
            });
        });
    });

</script>
